<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>列表</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{static/plugins/layui/css/layui.css}"/>
</head>
<body>

<div style="margin:10px;">
    <form class="layui-form">
        <div class="layui-form-item ">
            <div class="layui-inline">
                <div class="layui-form-item ">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="color: red">* </span>姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="su01" th:value="${sysUser.su01}" lay-verify="required" placeholder="" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="color: red">* </span>登录名</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="su05" th:value="${sysUser.su05}" lay-verify="required" placeholder="" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item ">
                    <div class="layui-inline">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <select class="layui-form-select" name="su02" lay-verify="false">
                                <option value="">-- 请选择 --</option>
                                <div th:each="item,iterStat : ${sex}">
                                    <option th:value="${item.sd02}" th:text="${item.sd01}" th:selected="${item.sd02 == sysUser.su02 ? true : false}"></option>
                                </div>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="su03" th:value="${sysUser.su03}" lay-verify="false" placeholder="" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item ">
                    <div class="layui-inline">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input date" name="su04" th:value="${sysUser.su04}" lay-verify="false" placeholder="" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证号</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="su13" th:value="${sysUser.su13}" lay-verify="false" placeholder="" autocomplete="off"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 100px;">
                <div class="layui-upload" style="margin-top: 0px;">
                    <div class="layui-upload-list">
                        <div style="padding: 5px;border: lightgrey 1px solid;text-align: center" >
                            <!--人员正面照-->
                            <input type="hidden" placeholder="人员图片ID" id="fjIds"/>
                            <div th:if="${sysAcc != null}">
                                <img class="layui-upload-img photo" th:src="@{/sysAcc/getPhoto(filePath=${sysAcc.sa02})}" style="width: 140px;height: 160px;"/>
                            </div>
                            <div th:if="${sysAcc == null}">
                                <img class="layui-upload-img photo" th:src="@{static/images/head/head.jpg}" style="width: 140px;height: 160px;"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item ">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="su11" th:value="${sysUser.su11}" lay-verify="photoOrEmpty" placeholder="" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="su14" th:value="${sysUser.su14}" lay-verify="emailOrEmpty" placeholder="" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-inline">
                    <input type="radio" name="su20" lay-skin="primary" id="sd10_yes" title="启用" value="1" th:field="*{sysUser.su20}"/>
                    <input type="radio" name="su20" lay-skin="primary" id="sd10_no" title="禁用" value="0" th:field="*{sysUser.su20}"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学历</label>
            <div class="layui-input-inline">
                <select class="layui-form-select" name="su07" lay-verify="false">
                    <option value="">-- 请选择 --</option>
                    <div th:each="item,iterStat : ${eduBg}">
                        <option th:value="${item.sd02}" th:text="${item.sd01}" th:selected="${item.sd02 == sysUser.su07 ? true : false}"></option>
                    </div>
                </select>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">社交账号</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="su12" th:value="${sysUser.su12}" lay-verify="false" placeholder="" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item ">
                <label class="layui-form-label">家庭住址</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="su08" th:value="${sysUser.su08}" lay-verify="false" placeholder="" autocomplete="off"/>
                </div>
        </div>
        <div class="layui-form-item ">
                <label class="layui-form-label">单位名称</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="su09" th:value="${sysUser.su09}" lay-verify="false" placeholder="" autocomplete="off"/>
                </div>
        </div>
        <div class="layui-form-item ">
                <label class="layui-form-label">单位地址</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="su10" th:value="${sysUser.su10}" lay-verify="false" placeholder="" autocomplete="off"/>
                </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="su18" th:text="${sysUser.su18}" lay-verify="false" placeholder="" autocomplete="off"></textarea>
            </div>
        </div>
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">添加附件</label>-->
            <!--<div class="layui-input-block">-->
                <!--<input type="text" class="layui-input"  id="xwxxDxsbUploadName" readonly="readonly" placeholder=" + + + "/>-->
                <!--<input type="hidden" class="layui-input"  id="xwxxDxsbUploadId" />-->
            <!--</div>-->
        <!--</div>-->
        <input type="hidden" class="layui-input" name="su00" th:value="${sysUser.su00}"/>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addUserFilter">保存</button>
                <button type="reset" class="layui-btn">重置</button>
            </div>
        </div>
    </form>
</div>




</div>

<!-- JS -->
<script type="text/javascript" th:src="@{static/plugins/layui/layui.js}"></script>

<script th:inline="javascript">

    layui.use(['form', 'layer','table','laydate','upload'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var laydate = layui.laydate;

        form.render();

        //自定义验证规则
        form.verify({
            numberOrEmpty: function (value, item) {
                if (value != '') {
                    if (!/^\d+$/.test(value)) {
                        return '只能填写数字';
                    }
                }
            },
            photoOrEmpty: function (value, item) {
                if (value != '') {
                    if (!/^1\d{10}$/.test(value)) {
                        return '请填写正确的手机号';
                    }
                }
            },
            idCardOrEmpty: function (value, item) {
                if (value != '') {
                    if (!/(^\d{15}$)|(^\d{17}(x|X|\d)$)/.test(value)) {
                        return '请填写正确的身份证号';
                    }
                }
            },
            emailOrEmpty: function (value, item) {
                if (value != '') {
                    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
                        return '邮箱格式不正确';
                    }
                }
            }
        });

        //保存信息
        form.on('submit(addUserFilter)', function (data) {

            // var wxrys = [];
            // var tr = $("#zyldList").find("tr");
            // $(tr).each(function(index,element){
            //     var ld = {};
            //     ld.wxryXm = $(this).find("input.wxryXm").val();
            //     ld.wxryJh = $(this).find("input.wxryJh").val();
            //     ld.wxryDwmc = $(this).find("input.wxryDwmc").val();
            //     ld.wxryLxfs = $(this).find("input.wxryLxfs").val();
            //     ld.memo = $(this).find("input.memo").val();
            //     wxrys.push(ld);
            // });
            data.field["temp1"] = $('#fjIds').val();
            delete data.field['file'];//清除自带的file
            $.ajax({
                url: 'sysUser/modSysUser',
                type: 'post',
                data: {jsonStr:JSON.stringify(data.field)},
                dataType: 'json',
                success: function (res) {
                    if(0 === res.code){
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.msg(res.msg,{icon:6,time: 1500});
                        parent.layer.close(index);
                    }else{
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                }
            });
            return false;
        });

        //鼠标悬浮提示
        $(".photo").on({
            'mouseover': function () {
                var that = this;
                layer.tips('点我试试', that, {
                    tips: 1,
                    time: 0
                });
            },
            'mouseout': function () {
                layer.close(layer.tips());
            }
        });
        //图片上传
        var uploadInst = upload.render({
            elem: '.photo',
            url: 'sysAcc/addAcc',
            accept: 'images' ,//允许上传的文件类型,可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            acceptMime: 'image/*',
            multiple:'false',//是否允许批量上传
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('.photo').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res){
                if(res.code === 0){
                    $('#fjIds').val(res.data)
                }else{
                    return layer.msg('异常错误',{icon:6});
                }
            },
            error: function(){
            }
        });

        //日期框渲染
        lay('.date').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click',
                theme: 'grid',
                format: 'yyyy-MM-dd'
            });
        });


    });
</script>

</body>
</html>